<template>
	<div>
		<fheader>猫眼电影</fheader>
		<div class="nav">
			<div class="location">
				<select>
					<option value="" v-for="item in loc">{{item}}</option>
				</select>
			</div>
			<router-link to="/home/Fcontent" tag="div">
			<div class="hot-item" :class="{active: curIndex==1}">正在热映</div>
			</router-link>
			
			<router-link to="/home/comingPlay" tag="div">
			<div class="hot-item" :class="{active: curIndex==0}">即将上映</div>
			</router-link>
			
			<div class="search">
				<img src="../assets/search_fangdajin.png"/>
			</div>
		</div>
		
	</div>
</template>

<script>
	import Notshown from './Fnav/Notshown.vue'
	import Fcontent from './Fnav/Fcontent.vue'
	import Fheader from './Fheader.vue'
	export default {
		data() {
			return {
				loc: ["广州", "深圳", "东莞"],
				curIndex:1
				
			}
		},
		mounted(){
			this.set_curIndex(this.$route.fullPath)
		},
		
		methods:{
			set_curIndex(fullPath){
				if(/Fcontent/.test(fullPath)){
					this.curIndex=1
				}
				if(/comingPlay/.test(fullPath)){
						this.curIndex=0
				}
			}
		},
		watch:{
			$route(newValue){
				this.set_curIndex(newValue.fullPath)
			}
		},

		components: {
			Notshown,
			Fcontent,
			Fheader
		}
	}
</script>

<style lang="scss" scoped>
	.nav {

		position: fixed;
		top: 7%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 45px;
		border-bottom: 1px solid #e6e6e6;
		z-index: 999;
		background: #FFFFFF;
	}
	
	.location {
		select {
			border: 0;
		}
	}
	
	.search {
		width: 20px;
		height: 20px;
		img{
			width: 100%;
			height: 100%;
		}
	}
	
	.border {
		border-bottom: 2px solid red;
		height: 45px;
		line-height: 45px;
	}
	.hot-item{
		color: #666;
		font-size: 15px;
		font-weight: 700;
		height: 45px;
		line-height: 45px;
	}
	.active{
		border-bottom: 2px solid #ef4238;
		color: #ef4238;
	}

</style>